<template>
  <div class="chart-box">
    <el-divider><i :class="iconName"></i>{{ title }}</el-divider>
    <el-link type="primary" class="header-skip-icon" @click="skipRoute"
      ><i class="el-icon-full-screen" style="font-size: 20px"></i
    ></el-link>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    iconName: {
      type: String,
      required: true,
    },
    route: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    skipRoute() {
      this.route && this.$router.push(this.route);
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  text-align: center;
  margin: 12px 30px;
}
::v-deep .el-divider--horizontal {
  margin: 8px 0 0px !important;
}
::v-deep .el-page-header__left .el-icon-back {
  display: none;
}
::v-deep .el-page-header {
  justify-content: center;
}
.header-skip-icon {
  position: absolute;
  right: -25px;
  top: -10px;
  z-index: 999;
}
// ::v-deep .el-divider--horizontal {
//   margin: 24px 0 8px !important;
// }
</style>
